.playPanel {
  @buttonsize: 60px;
  @buttonmargin: 15px;
  @iconsize: 24px;
  display: flex;
  border-radius: 200px;
  left: 50%;
  transform: translateX(-50%);
  bottom: -@buttonsize - @buttonmargin * 2;
  &.open {
    bottom: 45 + @SYSMARGINBOTTOM + @SYSMARGIN;
  }
  .button {
    width: @buttonsize;
    height: @buttonsize;
    border-radius: @buttonsize;
    background-color: #0365d4;
    background-size: @iconsize @iconsize;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.8;
    margin: @buttonmargin;
    cursor: pointer;
    &:hover {
      opacity: 1;
    }
    &.backward {
      background-image: url("../img/player/next.png");
      transform: rotateZ(180deg);
    }
    &.play {
      background-image: url("../img/player/play.png");
      background-color: #0e8600;
    }
    &.pause {
      background-image: url("../img/player/pause.png");
      background-color: @color-orange;
    }
    &.forward {
      background-image: url("../img/player/next.png");
    }
    &.disable {
      opacity: 0.5;
      &:hover {
        opacity: 0.5;
      }
    }
  }
}